// char-painter.js
// class CharPainter {
//     static get inputProperties() { return ['--char-coords']; } // 接收坐标数据

//     paint(ctx, size, props) {
//         // const dbName = 'MyDatabase';
//         // const storeName = 'items';

//         // // 打开数据库
//         // const request = indexedDB.open(dbName, 1);
//         // request.onsuccess = (event) => {
//         //     const db = event.target.result;
//         //     const transaction = db.transaction(storeName, 'readonly');
//         //     const store = transaction.objectStore('items');
//         //     const cursorRequest = store.openCursor(); // 使用游标遍历数据

//         //     const results = [];
//         //     cursorRequest.onsuccess = (e) => {
//         //         const cursor = e.target.result;
//         //         if (cursor) {
//         //             results.push(cursor.value);
//         //             cursor.continue();
//         //         } else {
//         //             // self.postMessage(results); // 数据发送回主线程
//         //         }
//         //         console.log("results", results)
//         //     };
//         // };

//         // request.onerror = (event) => {
//         //     self.postMessage({ error: event.target.error });
//         // };

//         // console.log("props", ctx, props, props.get('--char-coords'))
//         // if (props.get('--char-coords').length > 0) {
//         //     const coords = JSON.parse(props.get('--char-coords').toString());
//         //     coords.forEach(char => {
//         //         ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
//         //         ctx.fillRect(char.x, char.y, char.width, char.height); // 为每个字符绘制红色半透明矩形
//         //     });
//         // }
//     }
// }
// registerPaint('char-painter', CharPainter);

// console.log("char-painter.js load");


// 数据块缓存
const chunks = new Map();
                
// 计算最大块大小（不同浏览器限制不同）
const MAX_CHUNK_SIZE = 4000;  // 保守估计4KB

registerPaint('char-painter', class {
    static get inputProperties() {
        // 动态声明输入属性
        return [
            '--data-loaded',
            '--chunk-count',
            '--chunk-size',
            '--chunk-prefix',
            '--progress'
        ];
    }
    
    parseChunks(properties, size) {
        const chunkCount = parseInt(properties.get('--chunk-count'));
        const chunkSize = parseInt(properties.get('--chunk-size'));
        const prefix = properties.get('--chunk-prefix').toString();
        
        // 验证参数有效性
        if (isNaN(chunkCount) || isNaN(chunkSize)) return null;
        
        let data = '';
        
        // 优先尝试读取缓存
        if (chunks.size === chunkCount) {
            for (let i = 0; i < chunkCount; i++) {
                const chunk = chunks.get(i);
                data += chunk;
            }
            return data;
        }
        
        // 重新组装
        for (let i = 0; i < chunkCount; i++) {
            const value = properties.get(`--${prefix}-${i}`).toString();
            if (value.length > 0) {
                data += value;
                chunks.set(i, value); // 缓存结果
            } else {
                // 数据块未加载完成
                return null;
            }
        }
        return data;
    }
    
    paint(ctx, size, properties) {
        console.log("properties", properties)
        const isLoaded = properties.get('--data-loaded').toString() === 'true';
        const progress = parseInt(properties.get('--progress'));
        
        // 绘制背景
        ctx.fillStyle = '#f0f5ff';
        ctx.fillRect(0, 0, size.width, size.height);
        
        // 加载状态提示
        if (!isLoaded) {
            const text = "";
            console.log("数据加载中", properties.get('--progress'));
            // const textWidth = ctx.measureText(text).width;
            
            // ctx.font = '16px Arial';
            // ctx.fillStyle = '#0066cc';
            // ctx.fillText(text, (size.width - textWidth) / 2, size.height / 2);
            
            // // 绘制进度条
            // const barWidth = size.width * 0.7;
            // const barHeight = 10;
            // const barX = (size.width - barWidth) / 2;
            // const barY = size.height / 2 + 30;
            
            // ctx.fillStyle = '#ddd';
            // ctx.fillRect(barX, barY, barWidth, barHeight);
            // ctx.fillStyle = '#0066cc';
            // ctx.fillRect(barX, barY, barWidth * progress / 100, barHeight);
            
            return;
        }
        
        // 解析并处理大数据
        const data = this.parseChunks(properties, size);
        if (!data) return; // 数据尚未完全加载
        
        // 在实际应用中，这里会使用数据进行渲染
        // ctx.font = 'bold 18px Arial';
        // ctx.fillStyle = '#006600';
        
        // const text = `成功加载 ${}KB 数据！`;
        console.log(Math.round(data.length / 1024))
        // const textWidth = ctx.measureText(text).width;
        // ctx.fillText(text, (size.width - textWidth) / 2, size.height / 2);
        
        // 简单可视化数据（真实场景更复杂）
        const lineHeight = 20;
        // ctx.font = '14px monospace';
        
        for (let i = 0; i < 20; i++) { // 仅显示前20行
            const start = i * 60;
            const line = data.substring(start, start + 60);
            if (line.length > 0) {
                // ctx.fillStyle = i % 2 === 0 ? '#333' : '#666';
                // ctx.fillText(line, 20, 100 + i * lineHeight);
                console.log(line)
            }
        }
    }
});